
<template>
  <a-modal
    :title="'单据'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="background">
      <a-card>
        <a-table
          :loading="loading"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="backList"
        >
        </a-table>
      </a-card>
      <div class="info-action">
        <a-button
          type="primary"
          style="margin-left: 8px"
          @click="submit"
        >
          提交
        </a-button>
      </div>
    </div>
  </a-modal>

</template>

<script>
const columns = [
  {
    title: '版次',
    dataIndex: 'bc'
  },
  {
    title: '单据编号',
    dataIndex: 'billNo'
  },
  {
    title: '制版师',
    dataIndex: 'bs'
  },
  {
    title: '件数',
    dataIndex: 'js'
  }
]

export default {
  components: {},
  props: {
    backList: {
      type: Array,
      default: null
    }
  },

  data() {
    return {
      columns,
      selectedRowKeys: [],
      BillList: [],
      loading: false
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.$emit('closeBill', 1)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.BillList = selectedRows

      this.selectedRowKeys = selectedRowKeys
    },
    submit() {
      this.$emit('closeBill', this.BillList)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
.info-action {
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
</style>